 <template>
  <div>
    <el-button
      class="filter-item add-style"
      style="margin-left: 10px;"
      type="primary"
      icon="el-icon-circle-plus-outline"
      @click="clearInput"
      size="mini"
    >添加</el-button>

    <tTable :columns="columns" :data="list">
      <template v-slot:operate="slotProps">
        <el-button type="danger" @click="deleteRow(slotProps.scope.row.id)" size="mini">移除</el-button>
        <el-button
          type="primary"
          class="add-style"
          @click="editRow(slotProps.scope.$index)"
          size="mini"
        >编辑</el-button>
      </template>
    </tTable>

    <el-dialog :title="isEdit ? '编辑语言' : '添加新语言'" :visible.sync="dialogVisible" width="50%">
      <el-form :model="formData" ref="formData" label-width="120px">
        <el-form-item
          label="语言名称"
          prop="language"
          :rules="[{ required: true, message: '语言名称', trigger: 'blur' }]"
        >
          <el-input
            placeholder="添加新语言"
            v-model="formData.language"
            style="width: 200px;"
            class="filter-item"
          />
        </el-form-item>
        <el-form-item
          label="语言代码"
          prop="code"
          :rules="[{ required: true, message: '语言代码', trigger: 'blur' }]"
        >
          <el-input
            placeholder="语言代码"
            v-model="formData.code"
            style="width: 200px;"
            class="filter-item"
          />
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" class="add-style" @click="confirmBtn">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getAllLanguage,
  removeLanguage,
  addLanguage,
  updateLanguage
} from "api/getData";
import { formatDateTime } from "src/util/time.js";

import tTable from "src/components/table/index.vue";

export default {
  data() {
    return {
      activeName: "lan_org",
      list: [],
      loading: true,
      searchData: "",
      dialogVisible: false,

      isEdit: false,
      chooseID: "",
      formData: {
        language: "",
        code: ""
      },

      columns: [
        {
          attr: { label: "", type: "index", width: "50" }
        },
        {
          attr: { prop: "name", label: "语言名称" }
        },
        {
          attr: { prop: "code", label: "语言代码" }
        },
        {
          attr: { prop: "speechCode", label: "语音代码" }
        },
        {
          attr: { prop: "defaultVoice", label: "语音人" }
        },
        {
          attr: { prop: "updateDate", label: "修改时间" }
        },
        {
          slot: "operate",
          attr: { label: "操作", width: "220" }
        }
      ]
    };
  },
  mounted() {
    this.getData();
  },
  components: { tTable },
  methods: {
    editRow(index) {
      this.dialogVisible = true;
      this.chooseID = this.list[index].id;
      this.formData.language = this.list[index].name;
      this.formData.code = this.list[index].code;
      this.isEdit = true;
    },
    clearInput() {
      this.dialogVisible = true;
      this.isEdit = false;
      this.formData.language = "";
      this.formData.code = "";
    },
    confirmBtn() {
      this.$refs.formData.validate(val => {
        if (val) {
          var data = {
            code: this.formData.code,
            name: this.formData.language
          };
          if (this.isEdit) {
            // 修改
            updateLanguage(this.chooseID, data).then(res => {
              this.$message.success("修改成功");
              this.dialogVisible = false;
              this.getData();
            });
          } else {
            // 添加
            addLanguage(data).then(res => {
              this.$message.success("添加成功");
              this.dialogVisible = false;
              this.getData();
            });
          }
        } else {
          return false;
        }
      });
    },
    deleteRow: function(index) {
      this.$confirm("确定删除么？")
        .then(_ => {
          removeLanguage(index).then(res => {
            this.$message.success("语言已删除");
            this.getData();
          });
        })
        .catch(_ => {});
    },
    getData() {
      getAllLanguage().then(res => {
        res = res.map(item => {
          item.updateDate = formatDateTime(item.updateDate);
          item.isDelete = false;
          return item;
        });
        this.list = res;
        this.loading = false;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "src/style/mixin";
.tabList {
  @include fj(flex-start);

  .tabItem {
    padding-left: 20px;
  }
}
</style>
